<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        /*为了贴近效果，网页背景就是原网页背景图，自动适应*/
        body{
            /*background-image: url(images/lt.png);*/
            background-size: cover;
        }
        #hat{
            width: 100%;
            height: 35px;
            background-color:#f5f5f5;
        }
        #zongti{
            width: 1000px;
            margin: auto;
        }
        #top{
            width: 1000px;
            height: 80px;
            line-height: 80px;
            float: left;
            font-size:22px;
        }
        select{
            position: relative;
            border: 0;
        }
        #tdi{
            width: 120px;
            height: 90px;
            float: left;
        }
        #main{
            width: 1000px;
            height: 420px;
            float: left;
        }
        #xin{
            width: 400px;
            height: 300px;
            margin-left: 290px;
            margin-top:145px;
        }
        #xl{
            width: 70px;
            float: left;
        }
        .xll{
            width: 70px;
            height: 55px;
            text-align: right;
            line-height: 55px;
            font-size: 14px;
        }
        #xr{
            margin-top:10px;
            margin-left: 10px;
            width: 300px;
            line-height: 55px;
            font-size: 14px;
            float: left;
        }
        #xrs{
            width: 308px;
            padding-left: 10px;
        }
        #xrr{
            margin-top: 20px;
            padding-left: 10px;
            width: 308px;
        }
        .bk{
            border: 1px solid #d6d6d6;
            line-height: 34px;
            border-radius: 3px;
        }
        #ty{
            width: 320px;
            height: 38px;
            margin-top: 30px;
            text-align:center;
            line-height: 38px;
            border-radius: 5px;
            background: linear-gradient(to right, #f90, #ff5000);
        }
        #xy{
            padding-top: 12px;
            width: 330px;
            font-size: 12px;
            line-height: 20px;
        }
        .ha a{
            text-decoration:none;
        }
        .ha a:link{
            color: #ff5000;
        }
        .ha a:hover{
            color: #ff5000;
        }
        .ha a:visited{
            color: #ff5000;
        }
        .ha a:active{
            color: #ff5000;
        }
        #qh{
            margin-top: 15px;
            float: right;
            height: 30px;
            font-size: 12px;
        }
        .hh a{
            color:#6c6c6c;
            text-decoration:none;
        }
        .hh a:link{
            color:#6c6c6c;
        }
        .hh a:hover{
            color: #ff5000;
        }
        .hh a:active{
            color: #ff5000;
        }
        .hh a:visited{
            color:#6c6c6c;
        }
        #bottom{
            float: left;
        }
        #bs{
            margin-top: 20px;
            border-top: 1px solid #ddd;
            line-height: 40px;
            height: 40px;
            width: 1ooopx;
        }
        #bz{
            border-top: 1px solid #ddd;
            line-height: 40px;
            height: 40px;
            width: 1ooopx;
        }
        b{
            color:#ddd;
        }
        em{
            color: #9c9c9c;
        }
        #bx{
            color: #bbb;
        }
        .gs{
            height: 30px;
            border-top: #fff solid 3px;
        }
    </style>
    
</head>
<body>
    <div id="hat"></div>
    <div id="zongti">
        <div id="top">
            <div id="tdi">
                <img src="images/tbbt.png" width="120px" height="80px">
            </div>
            用户注册
        </div>
        <div id="main">
            <div id="xin">
                <div id="xl">
                    <div class="xll"><label>手机号码</label></div>
                    <div class="xll"><label>验证码</label></div>
                </div>
                <div id="xr">
                    <div id="xrs" class="bk">
                        <div id="xrsl">
                            <select name="" id="">
                                <option value="" disabled selected hidden style="">中国大陆&nbsp;&nbsp;&nbsp;+86</option>
                                <option value="">中国大陆&nbsp;&nbsp;&nbsp;+86</option>
                                <option value="">中国台湾&nbsp;&nbsp;&nbsp;+86</option>
                                <option value="">中国大陆&nbsp;&nbsp;&nbsp;+86</option>
                                <option value="">中国台湾&nbsp;&nbsp;&nbsp;+86</option>
                                <option value="">中国大陆&nbsp;&nbsp;&nbsp;+86</option>
                                <option value="">中国台湾&nbsp;&nbsp;&nbsp;+86</option>
                            </select>
                            <input placeholder="请输入你的手机号码" type="te1" value="" id="sj" style="width: 170px;height: 30px;border: none;outline: none;">
                        </div>
                    </div>
                    <div id="xrr" class="bk">
                        <div id="xrsl" class="ha">
                            <input placeholder="请输入校验码" type="te2" value="" style="width: 230px;height: 31px;border: none;outline: none;">
                            <a href="#"><span class="yzm" id="yzm">获取验证码</span></a>
                        </div>
                    </div>
                    <div id="ty">
                        <a><font color="#FFFFFF">同意协议并注册</font></a>
                    </div>
                    <div id="xy" class="ha">
                        <font color="#999999">已阅读并同意以下协议</font>
                        <a href="https://terms.alicdn.com/legal-agreement/terms/TD/TD201609301342_19559.html" target="_blank">淘宝平台服务协议</a>、
                        <a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html" target="_blank">隐私权政策</a>、
                        <a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201811121436_80276.html" target="_blank">法律声明</a>、
                        <a href="https://render.alipay.com/p/f/fd-jm7jym6r/alipay/multi-agreement.html" target="_blank">支付宝及客户端服务协议</a>
                    </div>
                    <div id="qh" class="ha"><a href="https://passport.alibaba.com/member/reg/fast/union_reg.htm?_regfrom=TB_ENTERPRISE" target="_blank">切换成企业账户注册</a></div>
                </div>
            </div>
        </div>
        <div id="bottom">
            <div id="bs"  class="hh gs">
                <a href="https://page.1688.com/shtml/about/ali_group1.shtml">阿里巴巴集团</a><b>|</b>
                <a href="https://www.alibaba.com">阿里巴巴中国站</a><b>|</b>
                <a href="https://www.aliexpress.com">全球速卖通</a><b>|</b>
                <a href="https://www.taobao.com">淘宝网</a><b>|</b>
                <a href="https://www.tmall.com">天猫</a><b>|</b>
                <a href="https://ju.taobao.com">聚划算</a><b>|</b>
                <a href="https://www.etao.com">一淘</a><b>|</b>
                <a href="https://www.alimama.com">阿里妈妈</a><b>|</b>
                <a href="https://www.aliyun.com">阿里云计算</a><b>|</b>
                <a href="https://www.yunos.com">云OS</a><b>|</b>
                <a href="#">万网</a><b>|</b>
                <a href="https://www.alipay.com">支付宝</a>
            </div>
            <div id="bz" class="hh gs">
                <a href="https://www.taobao.com/about">关于淘宝</a>
                <a href="https://www.taobao.com/about/partners.php">合作伙伴</a>
                <a href="https://pro.taobao.com">营销中心</a>
                <a href="https://service.taobao.com/support/main/service_route.htm">开放平台</a>
                <a href="https://www.taobao.com/about/join.php">诚征英才</a>
                <a href="https://consumerservice.taobao.com/contact-us">联系我们</a>
                <a href="https://www.taobao.com/sitemap.php">网站地图</a>
                <a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html">法律声明及隐私权政策</a>
                <em>© 2021 Taobao.com 版权所有</em>
            </div>
            <div id="bx" class="hh">
                <span>网络文化经营许可证:</span>
                <a href="https://img.alicdn.com/tps/i4/T1ysdvXtNeXXcPpEkQ-972-636.jpg">文网文[2010]040号</a>
                <span>增值电信业务经营许可证：浙B2-20080224-1</span><b>|</b>
                <span>信息网络传播视听节目许可证：1109364号</span>
            </div>
        </div>
    </div>
    <script>
        var yz = document.querySelector("#yzm");
        yz.addEventListener("click", function () {
        var text = document.querySelector("#sj");
        if (text.value.length != 11) {
            alert("请输入正确的手机号");
        } else {
            alert("发送成功!");
            var t = 59;
            var timer = setInterval(function () {
                    t--;
                    yz.innerText = t + '秒';
                }, 1000)
        }
    });
    </script>
</body>
</html>